<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>电影管理</el-breadcrumb-item>
      <el-breadcrumb-item>电影列表</el-breadcrumb-item>
      <el-breadcrumb-item>剧照列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->
    <el-divider></el-divider>
    <!-- 列表页面 -->
    <div v-if="this.thumbList">
      <div
        class="thumb-item"
        v-for="item in thumbList"
        :key="item.id"
        style="display: inline-block">
        <el-image
          style="
            width: 180px;
            height: 140px;
            box-shadow: #0003 5px 5px 5px 0px;
            margin: 10px 25px 0 0;
          "
          :src="item.url"
          fit="cover"></el-image>
        <i class="el-icon-error" @click="deleteThumb(item.id)"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      thumbList: null,
      movie_id: this.$route.params.movie_id,
    }
  },
  methods: {
    // 加载剧照列表
    loadThumbList() {
      this.$http.movieThumbApi.list({ movie_id: this.movie_id }).then((res) => {
        // console.log(res)
        if ((res.data.code = 200)) {
          this.thumbList = res.data.data
        }
      })
    },
    // 删除剧照
    deleteThumb(id) {
      this.$http.movieThumbApi.delete({ id }).then((res) => {
        console.log(res, "删除成功")
        if (res.data.code == 200) {
          this.loadThumbList()
        }
      })
    },
  },
  mounted() {
    // 加载演员列表
    this.loadThumbList()
  },
}
</script>
<style scoped>
.thumb-item {
  position: relative;
  display: inline-block;
}
.thumb-item:hover i {
  display: block;
}
.thumb-item i {
  position: absolute;
  top: 0px;
  right: 10px;
  font-size: 1.3em;
  display: none;
}
</style>
